<template>
  <div class="app-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="header-left">
        <button class="back-btn" @click="goBack">
          <i class="fas fa-chevron-left"></i>
        </button>
        <h1 class="title">打卡练习</h1>
        <div></div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 日期导航 -->
      <div class="date-navigation">
        <button class="nav-btn" @click="changeDate(-1)">
          <i class="fas fa-chevron-left"></i>
        </button>
        <div class="date-display">
          <div class="current-date">{{ formattedDate }}</div>
          <div class="current-day">{{ formattedDay }}</div>
        </div>
        <button class="nav-btn" @click="changeDate(1)">
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>

      <!-- 进度概览 -->
      <div class="progress-overview">
        <div class="progress-header">
          <i class="fas fa-trophy"></i>
          <span>今日训练进度</span>
        </div>
        <div class="progress-stats">
          <div class="stat-item">
            <div class="stat-value">{{ tasks.length }}</div>
            <div class="stat-label">总任务</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ completedTasksCount }}</div>
            <div class="stat-label">已完成</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ overallProgress }}%</div>
            <div class="stat-label">总进度</div>
          </div>
        </div>
      </div>

      <!-- 任务列表 -->
      <div class="task-section-header">
        <div class="task-icon">
          <i class="fas fa-tasks"></i>
        </div>
        <span>今日训练任务</span>
      </div>

      <!-- 任务卡片 -->
      <div
        v-for="(task, index) in tasks"
        :key="task.id"
        class="task-card"
        :style="{ 'animation-delay': `${0.1 + index * 0.1}s` }"
      >
        <div class="task-header">
          <span
            class="task-tag"
            :style="{ backgroundColor: tagColors[task.type] }"
            >{{ task.tag }}</span
          >
          <div class="task-time" v-if="task.minute">
            <i class="fas fa-clock"></i> {{ task.minute }}分钟
          </div>
        </div>
        <h3 class="task-title">{{ task.title }}</h3>
        <p class="task-description">{{ task.info }}</p>

        <div class="task-dates">
          <div>
            <i class="fas fa-calendar-alt"></i> 开始:
            {{ formatDate(task.startTime) }}
          </div>
          <div>
            <i class="fas fa-calendar-check"></i> 结束:
            {{ formatDate(task.endtime) }}
          </div>
        </div>

        <!-- 移除进度条部分 -->

        <div class="task-footer">
          <!-- 根据 hasRecordToday 显示完成状态 -->
          <span
            class="task-status"
            :class="getStatusClass(task.hasRecordToday)"
          >
            {{ getStatusText(task.hasRecordToday) }}
          </span>
          <button
            class="checkin-btn"
            :class="{ completed: task.hasRecordToday === '1' }"
            @click="checkIn(task)"
            :disabled="task.hasRecordToday === '1'"
          >
            <span v-if="task.hasRecordToday === '0'">打卡训练</span>
            <span v-else @click="checkIn(task)">继续练习</span>
          </button>
        </div>
      </div>
    </div>
    <div class="btns">
      <button class="retry-btn2" @click="gohome()">返回首页</button>
    </div>
  </div>
</template>

<script>
import { practiceHomePage } from "@/api/user";

export default {
  name: "MentalHealthApp",
  data() {
    return {
      currentDate: new Date(),
      tasks: [],
      tagColors: {
        1: "rgba(99, 102, 241, 0.1)",
        2: "rgba(99, 102, 241, 0.1)",
        3: "rgba(99, 102, 241, 0.1)",
        4: "rgba(99, 102, 241, 0.1)",
      },
    };
  },
  computed: {
    formattedDate() {
      const year = this.currentDate.getFullYear();
      const month = this.currentDate.getMonth() + 1;
      const date = this.currentDate.getDate();
      return `${year}年${month}月${date}日`;
    },
    formattedDay() {
      const days = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      return days[this.currentDate.getDay()];
    },
    completedTasksCount() {
      return this.tasks.filter((task) => task.hasRecordToday === "1").length;
    },
    overallProgress() {
      if (this.tasks.length === 0) return 0;
      return Math.round((this.completedTasksCount / this.tasks.length) * 100);
    },
  },
  created() {
    this.getpracticeHomePage();
  },
  methods: {
    gohome() {
      this.$router.go(-1);
    },
    formatDate(dateString) {
      if (!dateString) return "";
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month.toString().padStart(2, "0")}-${day
        .toString()
        .padStart(2, "0")}`;
    },
    formatTimeForApi() {
      const year = this.currentDate.getFullYear();
      const month = (this.currentDate.getMonth() + 1)
        .toString()
        .padStart(2, "0");
      const day = this.currentDate.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day} 00:00:00`;
    },
    getpracticeHomePage() {
      let data = {
        userId: localStorage.getItem("userId"),
        practiceTime: this.formatTimeForApi(),
      };
      practiceHomePage(data)
        .then((res) => {
          if (res.code === 200) {
            this.tasks = res.data || [];
          } else {
            this.tasks = [];
          }
        })
        .catch((error) => {
          console.error("获取数据失败:", error);
          this.tasks = [];
        });
    },
    changeDate(days) {
      const newDate = new Date(this.currentDate);
      newDate.setDate(newDate.getDate() + days);
      this.currentDate = newDate;
      this.getpracticeHomePage(); // 切换日期时重新获取数据
    },
    // 新增方法：获取状态文本
    getStatusText(hasRecordToday) {
      return hasRecordToday === "1" ? "已完成" : "未完成";
    },
    // 新增方法：获取状态样式类
    getStatusClass(hasRecordToday) {
      return hasRecordToday === "1" ? "status-completed" : "status-pending";
    },
    checkIn(task) {
      // if (task.hasRecordToday === "1") return;

      if (task.type == 5) {
        this.$router.push({
          path: "/dkfrom",
          query: {
            task: JSON.stringify(task),
          },
        });
        // 跳转到打卡详情页面
      }
      if (task.type == 4) {
        this.$router.push({
          path: "/dkanswer",
          query: {
            task: JSON.stringify(task),
          },
        });
        // 跳转到打卡详情页面
      }
      if (task.type !== 4 && task.type !== 5) {
        this.$router.push({
          path: "/dklxxx",
          query: {
            task: JSON.stringify(task),
          },
        });
        // 跳转到问卷详情页面
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    showSuccessMessage(message) {
      // 创建消息元素
      const messageEl = document.createElement("div");
      messageEl.innerHTML = `<i class="fas fa-check-circle"></i> ${message}`;
      messageEl.className = "success-message";

      // 添加到DOM
      document.body.appendChild(messageEl);

      // 3秒后移除
      setTimeout(() => {
        if (document.body.contains(messageEl)) {
          document.body.removeChild(messageEl);
        }
      }, 3000);
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

.app-container {
  max-width: 28rem;
  margin: 0 auto;
  background-color: #ffffff;
  min-height: 100vh;
  padding-bottom: 5rem;
  font-family: "Noto Sans SC", sans-serif;
  color: #1e293b;
  line-height: 1.6;
}

/* 顶部导航 */
.header {
  top: 0;
  z-index: 10;
  background-color: #ffffff;
  box-sizing: border-box;
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box;
  padding: 0 50px 0 10px;
}
.header-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  border: none;
  cursor: pointer;
}

.title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
}

/* 主要内容 */
.main-content {
  padding: 1rem 1.5rem;
}

/* 日期导航 */
.date-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #b6d9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  border: none;
  cursor: pointer;
}

.date-display {
  text-align: center;
}

.current-date {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
}

.current-day {
  font-size: 0.875rem;
  color: #6b7280;
}

/* 进度概览 */
.progress-overview {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 1rem;
  padding: 1.25rem;
  color: white;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.progress-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.progress-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.875rem;
  opacity: 0.9;
}

/* 任务部分标题 */
.task-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
}

.task-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
}

/* 任务卡片 */
.task-card {
  background-color: white;
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.task-card:hover {
  transform: translateY(-0.3125rem);
  transition: all 0.3s ease;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.task-tag {
  padding: 0.25rem 0.75rem;
  color: #6366f1;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.task-time {
  color: #6b7280;
  font-size: 0.875rem;
}

.task-time i {
  margin-right: 0.25rem;
}

.task-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.task-description {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.task-dates {
  display: flex;
  gap: 1rem;
  color: #6b7280;
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.task-dates i {
  margin-right: 0.25rem;
}

/* 任务底部 */
.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 状态样式 */
.task-status {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

.status-completed {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.status-pending {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.checkin-btn {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkin-btn:hover:not(:disabled) {
  transform: translateY(-0.125rem);
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
}

.checkin-btn.completed {
  background: linear-gradient(90deg, #10b981, #34d399);
  cursor: default;
}

.checkin-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 成功消息 */
.success-message {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #10b981;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  z-index: 1000;
}

.success-message i {
  margin-right: 0.5rem;
}
.btns {
  display: flex;
  justify-content: space-around;
}
.retry-btn2 {
  background: #40a2f4;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
</style>
